<script>
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  onMounted,
  nextTick,
  watch,
  onBeforeMount,
} from "vue";
import ComPreview from "../../components/ComPreview.vue";
import ConfigControl from "../../components/ConfigControl.vue";
import ConfigButtonGroup from "../../components/ConfigButtonGroup.vue";
import LevelCard from "../../components/LevelCard.vue";
import LevelInput from "../../components/LevelInput.vue";
import {
  apiGetRtspUrl,
  apiSetZoomSmall,
  apiSetZoomBig,
  apiSetZoomStop,
  apiSetFollowingStop,
  apiSetFollowingStart,
  apiGetBrightening,
  apiGetProminent,
  apiSetBrightening,
  apiSetProminent,
  apiGetFollowingState,
} from "../../api/preview.js";
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: {
    ComPreview,
    ConfigControl,
    ConfigButtonGroup,
    LevelCard,
    LevelInput,
  },
  setup() {
    const state = reactive({
      rtspUrl: "",
      currentBrightening: 0,
      currentProminent: 0,
      startBrightening: -1,
      startProminient: -1,
      setStartP: false,
      setStartB: false,
      setStarHf: false,
    });

    const refComPreview = ref(null);

    onBeforeMount(() => {
      initSetting();
    });

    const initSetting = () => {
      //获取凸显等级
      apiGetProminent().then((res) => {
        if (res.code === 200 && res.status === true) {
          state.currentProminent = res.data.resolution;
          state.startProminient = res.data.resolution;
          if (state.currentProminent !== 0) {
            state.setStartP = true;
          }
        }
      });
      //获取图像增强等级
      apiGetBrightening().then((res) => {
        if (res.code === 200 && res.status === true) {
          state.currentBrightening = res.data.level;
          state.startBrightening = res.data.level;
          if (state.currentBrightening !== 0) {
            state.setStartB = true;
          }
        }
      });
      //获取目标跟踪状态
      apiGetFollowingState().then((res) => {
        if (res.code === 200 && res.status === true) {
          state.setStarHf = res.data.detect;
        }
      });
    };

    //调整焦距放大
    const handleZoomSmall = () => {
      apiSetZoomSmall().then(() => {});
    };
    //调整焦距缩小
    const handleZoomBig = () => {
      apiSetZoomBig().then(() => {});
    };

    const handleZoomStop = () => {
      apiSetZoomStop().then(() => {})
    }

    //开启目标追踪
    const handleFollowingStart = () => {
      apiSetFollowingStart().then(
        (res) => {
          if (res.code === 200 && res.status === true) {
            ElMessage({
              message: "目标追踪已开启",
              type: "success",
              offset: 400,
            });
            state.setStarHf = true
          } else {
            ElMessage({
              message: "目标追踪开启失败",
              type: "warning",
              offset: 400,
            });
            state.setStarHf = false;
          }
        },
        (err) => {
          ElMessage({
            message: "目标追踪开启失败",
            type: "warning",
            offset: 400,
          });
          state.setStarHf = false;
        }
      );
    };

    //关闭目标追踪
    const handleFollowingStop = () => {
      apiSetFollowingStop().then(
        (res) => {
          if (res.code === 200 && res.status === true) {
            ElMessage({
              message: "目标追踪已关闭",
              type: "success",
              offset: 400,
            });
            state.setStarHf = false
          } else {
            ElMessage({
              message: "目标追踪关闭失败",
              type: "warning",
              offset: 400,
            });
            state.setStarHf = true
          }
        },
        (err) => {
          ElMessage({
            message: "目标追踪关闭失败",
            type: "warning",
            offset: 400,
          });
          state.setStarHf = true;
        }
      );
    };

    //开启图像增强
    const handleImageLevelStart = () => {
      apiSetBrightening(1).then(
        (res) => {
          if (res.code === 200 && res.status === true) {
            ElMessage({
              message: "图像增强已开启",
              type: "success",
              offset: 400,
            });
            state.currentBrightening = 1;
            state.setStartB = true;
          } else {
            ElMessage({
              message: "图像增强开启失败",
              type: "warning",
              offset: 400,
            });
            state.setStartB = false;
          }
        },
        (err) => {
          ElMessage({
            message: "图像增强开启失败",
            type: "warning",
            offset: 400,
          });
          state.setStartB = false;
        }
      );
    };

    //关闭图像增强
    const handleImageLevelStop = () => {
      apiSetBrightening(0).then(
        (res) => {
          if (res.code === 200 && res.status === true) {
            ElMessage({
              message: "图像增强已关闭",
              type: "success",
              offset: 400,
            });
            state.currentBrightening = 0;
            state.setStartB = false;
          } else {
            ElMessage({
              message: "图像增强关闭失败",
              type: "warning",
              offset: 400,
            });
            state.setStartB = true;
          }
        },
        (err) => {
          ElMessage({
            message: "图像增强关闭失败",
            type: "warning",
            offset: 400,
          });
          state.setStartB = true;
        }
      );
    };

    //开启图像凸显
    const handleResolutionStart = () => {
      state.currentProminent = 1
      // apiSetProminent(1).then(
      //   (res) => {
      //     if (res.code === 200 && res.status === true) {
      //       ElMessage({
      //         message: "图像凸显已关闭",
      //         type: "success",
      //         offset: 400,
      //       });
      //       state.currentProminent = 1;
      //     } else {
      //       ElMessage({
      //         message: "图像凸显关闭失败",
      //         type: "warning",
      //         offset: 400,
      //       });
      //       state.setStartP = 0;
      //     }
      //   },
      //   (err) => {
      //     ElMessage({
      //       message: "图像凸显关闭失败",
      //       type: "warning",
      //       offset: 400,
      //     });
      //     state.setStartP = 0;
      //   }
      // );
    };

    //关闭图像凸显
    const handleResolutionStop = () => {
      // apiSetProminent(0).then(
      //   (res) => {
      //     if (res.code === 200 && res.status === true) {
      //       ElMessage({
      //         message: "图像凸显已关闭",
      //         type: "success",
      //         offset: 400,
      //       });
      //       state.currentProminent = 1;
      //     } else {
      //       ElMessage({
      //         message: "图像凸显关闭失败",
      //         type: "warning",
      //         offset: 400,
      //       });
      //       state.setStartP = 1;
      //     }
      //   },
      //   (err) => {
      //     ElMessage({
      //       message: "图像凸显关闭失败",
      //       type: "warning",
      //       offset: 400,
      //     });
      //     state.setStartP = 1;
      //   }
      // );
      state.currentProminent = 0;
    };

    //图像增强等级修改
    const changeImageLevel = (num) => {
      apiSetBrightening(num);
    };

    //图像凸显等级修改

    const changeResolution = (num) => {
      apiSetProminent(num).then(res => {
        if (res['code'] === 200 && res['status']) {
          state.setStartP = !state.setStartP
          if(num === 0) {
            ElMessage.success('图像凸显关闭成功!')
          } else {
            ElMessage.success(`图像凸显开启成功，等级：${num}!`)
          }
        } else {
          if(num === 0) {
            ElMessage.warning('图像凸显关闭失败!')
          } else {
            state.currentProminent = 0
            ElMessage.warning(`图像凸显开启失败，等级：${num}!`)
          }
        }
      })
    };

    const noMessageChangeResolution = (e) => {
      apiSetProminent(e)
    }

    return {
      ...toRefs(state),
      refComPreview,
      handleZoomSmall,
      handleZoomBig,
      handleZoomStop,
      handleFollowingStart,
      handleFollowingStop,
      handleImageLevelStart,
      handleImageLevelStop,
      handleResolutionStart,
      handleResolutionStop,
      changeImageLevel,
      changeResolution,
      noMessageChangeResolution
    };
  },
});
</script>

<template>
  <div class="preview-container">
    <div class="flv-bound">
      <com-preview
        ref="refComPreview"
        :has-play-control="true"
        :has-print-screen="true"
        :has-recording="true"
      />
    </div>
    <div class="operation-bound">
      <div class="sub-title">云台</div>
      <div class="control-bound">
        <config-control class="control-box" />
        <div class="controls">
          <config-button-group
            :size="40"
            :category="0"
            border
            @left="handleZoomSmall"
            @right="handleZoomBig"
            @stop="handleZoomStop"
          />
          <config-button-group
            :size="40"
            :category="1"
            style="margin-top: 12px"
          />
        </div>
      </div>
      <div class="sub-title">图像增强</div>
      <level-card
        :setStart="setStartB"
        @start="handleImageLevelStart"
        @stop="handleImageLevelStop"
      >
        <level-input
          label="开启增强"
          @changeIndex="changeImageLevel"
          v-model:level="currentBrightening"
          :list="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]"
        />
      </level-card>
      <div class="sub-title">部分凸显</div>
      <level-card
        v-model:setStart="setStartP"
        @start="handleResolutionStart"
        @stop="handleResolutionStop"
      >
        <level-input
          label="开启凸显"
          @changeIndex="changeResolution"
          v-model:level="currentProminent"
          :list="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
        />
      </level-card>
      <div class="sub-title">目标跟踪</div>
      <level-card
        :has-slot="false"
        :setStart="setStarHf"
        @start="handleFollowingStart"
        @stop="handleFollowingStop"
      />
    </div>
  </div>
</template>

<style lang="scss">
.preview-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 12px;

  .flv-bound {
    width: calc(100% - 315px);
    height: 100%;
  }

  .operation-bound {
    width: 300px;
    height: 100%;
    padding-right: 12px;

    .sub-title {
      color: #101010;
      font-size: 14px;
      margin-bottom: 12px;
      margin-top: 12px;

      &:first-child {
        margin-top: 0;
      }
    }

    .control-bound {
      display: flex;

      .controls {
        margin-left: 12px;
      }
    }
  }
}
</style>
